<template>
	<view class="page">
		<z-paging ref="paging" v-model="dataList"  @query="getData">
			<template #left>
				<view class="left-box">
					<scroll-view scroll-y class="scroll">
						<view class="item" :class="{on:index==category_i}" v-for="(item,index) in category" @click="onTab(index)">
							{{item.cate_name}}
						</view>
					</scroll-view>
				</view>
			</template>
			<view class="content">
				<view class="right" v-if="category[category_i]">
						<view class="top-box" style="background-color: #fff;">
							<up-tabs
								:activeStyle="{
									color:'#F5493D',
									fontWeight:'Bold',
									fontSize:'30rpx'
								}"
								:inactiveStyle="{
									color:'#141311',
									fontSize:'30rpx'
								}"
								lineWidth="60rpx"
								lineHeight="6rpx"
								lineColor="#F5493D"
								:current='tab_i'
								@change="onTab2"
								keyName="cate_name"
								:list="tabs"></up-tabs>
						</view>
						<view class="item" :class="{on:index==0}" v-for="(item,index) in dataList" >
							<image :src="item.image" @click="goDetails(item.id)" mode="aspectFill"></image>
							<view class="text" @click="goDetails(item.id)">
								<view class="h1" >
									{{item.store_name}}
								</view>
								<view class="b">
									<view class="money">
										<view class="em">￥</view>{{item.price}}
									</view>
									<!-- <view v-if="item.spec_type" @click="onShowSpec(item.id)" style="color:#FF401A;font-size: 24rpx;">
										选规格
									</view>
									<up-icon v-else name="shopping-cart" @click="onShowSpec(item.id)" color="#FF401A" size="48rpx"></up-icon> -->
								</view>
							</view>
						</view>
				</view>
			</view>
			<!-- <template #bottom>
				<view class="gouwuche">
					<view class="gouwuche-left">
						<view class="gouwuche-img" @click="show=true">
							<up-icon name="shopping-cart" color="#FF401A" size="68rpx"></up-icon>
							<view class="num" v-if="cartCountData.count>0">{{cartCountData.count}}</view>
						</view>
						<view class="gouwuche-jiage">
							<text style="font-size:28rpx">￥</text>{{cartCountData.sum_price}}
						</view>
					</view>
					<view class="gouwuche-right" @click="goPay">
						去支付
					</view>
				</view>
			</template> -->
			
			
		</z-paging>
		<my-good-spec
			ref="specRef"
			:showBtn="true"
			:content="content"
			:productAttr="content.productAttr"
			:productValue="content.productValue"
			@ok="onSpec"
		></my-good-spec>
		
		<u-popup :show="show" @close="show=false" closeOnClickOverlay bgColor='#FFF6F0' :safeAreaInsetBottom="false" round="20" @open="open">
			<view class="alert-box">
				<view class="title">
					<view class="l">
						已选商品
					</view>
					
					<view class="btn" @click="onDelCart">
						<u-icon name="trash" size="34rpx"></u-icon> 清空
					</view>
				</view>
				<view class="list-box">
					<view class="item" v-for="(item,index) in cartlist">
						<image :src="item.productInfo.image"  mode="aspectFill"></image>
						<view class="text">
							<view class="h1">
								{{item.productInfo.store_name}}
							</view>
							<view class="b">
								<view class="money">
									<view class="em">￥</view>{{item.productInfo.price}}
								</view>
								<view class="num">
									<up-icon name="minus-circle-fill" color="#FF401A" size="48rpx" @click="valChange(index,0)"></up-icon>
									<view class="val">
									{{item.cart_num}}
									</view> 
									<up-icon name="plus-circle-fill" color="#FF401A"  @click="valChange(index,1)" size="48rpx"></up-icon>
								</view>
								
							</view>
						</view>
					</view>
				</view>
				<view class="gouwuche">
						<view class="gouwuche-left">
							<view class="gouwuche-img"  @click="show=false">
								<up-icon name="shopping-cart" color="#FF401A" size="68rpx"></up-icon>
								<view class="num" v-if="cartCountData.count>0">{{cartCountData.count}}</view>
							</view>
							<view class="gouwuche-jiage">
								<text style="font-size:28rpx">￥</text>{{cartCountData.sum_price}}
							</view>
						</view>
						<view class="gouwuche-right" @click="goPay">
							立即购买
						</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script setup>
	import {ref,computed} from "vue"
	import {onLoad,onPageScroll} from "@dcloudio/uni-app"
	import {getProducts,getCategory,getProductDetail,cartCount,setCartNum,getCartList,delCart} from "@/api/products.js"
	const paging=ref(null)
	const category=ref([])
	const category_i=ref(0)
	const sid=ref(0)
	const cartlist=ref([])
	const content=ref('')
	const specRef=ref(null)
	const show=ref(false)
	const cartCountData=ref({
		count:0
	})
	const tabs=computed(()=>{
		const res=[];
		if(category.value){
			res.push({id:0,cate_name:'全部'})
			res.push(...category.value[category_i.value].children)
		}
		return res
	})
	const tab_i=ref(0)
	const dataList=ref([])
	const id=ref(0)
	onLoad(async (obj)=>{
		getCartCount()
		id.value=obj.id??0
	})
	const getData= async (pageNo, pageSize)=>{
		try {
			if(category.value.length==0){
				let res=await getCategory()
				category.value=res.data
				let re= res.data.findIndex((it)=>it.id==id.value)
				category_i.value=re>0?re:0
			}
			const re=await getProducts({params:{cid:category.value[category_i.value].id,sid:sid.value,page:pageNo,limit:pageSize}})
			paging.value.complete(re.data);
		} catch (error) {
			paging.value.complete(false);
		}
		
	}
	const onTab=(index)=>{
		category_i.value=index
		tab_i.value=0;
		sid.value=0
		paging.value.reload();
	}
	const onTab2=(e)=>{
		sid.value=e.id
		tab_i.value=e.index;
		paging.value.reload()
	}
	const goDetails=(id)=>{
		uni.navigateTo({
			url:"./details?id="+id
		})
	}
	const onShowSpec=async (id)=>{
		let res= await getProductDetail(id)
		content.value=res.data
		specRef.value.show();
	}
	const onSpec=async (e)=>{
		const post={product_id: content.value.storeInfo.id, type: 1, num: e.num};
		if(e.attrValue){
			post.uniqueId=content.value.productValue[e.attrValue].unique
		}
		let res=await setCartNum(post)
		specRef.value.hide();
		getCartCount();
	}
	const getCartCount=async ()=>{
		let res=await cartCount();
		cartCountData.value=res.data
		res=await getCartList();
		cartlist.value=res.data
	}
	const valChange = async (i,type)=>{
		const post={product_id: cartlist.value[i].product_id, type: type};
		if(cartlist.value[i].product_attr_unique){
			post.uniqueId=cartlist.value[i].product_attr_unique
		}
		let res=await setCartNum(post)
		getCartCount();
	}
	const onDelCart=async ()=>{
		await delCart({ids:cartCountData.value.ids})
		getCartCount();
	}
	const goPay=()=>{
		uni.navigateTo({
			url:`./confirmOrder?cartId=${cartCountData.value.ids.join(',')}`
		})
	}
	// import {getReservationProject} from "@/api/yuyue.js"
	// export default {
	// 	data() {
	// 		return {
	// 			category:[],
	// 			dataList:[],
	// 			category_i:0,
	// 			show:false,
	// 			cartlist:[]
	// 		}
	// 	},computed:{
	// 		countPrice(){
	// 			return this.cartlist.reduce(function(accumulator, currentValue) {
	// 				return (currentValue.productInfo.price*100)*currentValue.cart_num + accumulator;
	// 			}, 0)/100
	// 		}
	// 	},
	// 	onShow() {
	// 		uni.showTabBar()
	// 	},
	// 	async onLoad(){
	// 		// let res=await getProductCategory()
	// 		// this.category=res.data
	// 		this.$refs.paging.reload();
	// 	},
	// 	methods: {
	// 		async getCart(){
	// 			let res=await getCartList();
	// 			this.cartlist=res.data.valid
	// 		},
	// 		goDetails(id){
	// 			uni.navigateTo({
	// 				url:'/subpages/pages/product/details?id='+id
	// 			})
	// 		},
	// 		onTab(index){
	// 			this.category_i=index
	// 			this.$refs.paging.reload();
	// 		},
	// 		async valChange(index,val){
	// 			if(val>0){
	// 				try {
	// 					await cartNum({
	// 						id:this.cartlist[index].id,
	// 						number:val
	// 					})
	// 					this.cartlist[index].cart_num=val
	// 				} catch (error) {
	// 					uni.$u.toast(error)
	// 				}
	// 			}else{
	// 				let res=await delCart({
	// 					ids:this.cartlist[index].id
	// 				});
	// 				this.getCart();
	// 			}
				
	// 		}
	// 		,async onDelCart(){
	// 			let ids=this.cartlist.map((it)=>it.id).join(',')
	// 			if(ids==''){
	// 				return false
	// 			}
	// 			let res=await delCart({
	// 				ids:ids
	// 			});
	// 			this.getCart();
	// 			this.show=false
	// 		},
	// 		async getData(pageNo, pageSize){
	// 			try {
	// 				if(pageNo==1){
	// 					let category=await getProjecType()
	// 					if(this.category.length>0){
	// 						category.data.map((it)=>it.id).join(",")
	// 						const cid=this.category[this.category_i].id
	// 						if(category.data.map((it)=>it.id).join(",")!=this.category.map((it)=>it.id).join(',')){
	// 							this.category=category.data
	// 							const news_i=category.data.findIndex((it)=>it.id==cid)
	// 							this.category_i=news_i>-1?news_i:0
	// 						}
	// 					}else{
	// 						this.category=category.data
	// 					}
	// 				}
	// 				const res=await getReservationProject({type:this.category[this.category_i].id,page:pageNo,limit:pageSize})
	// 				this.$refs.paging.complete(res.data.list);
	// 			} catch (error) {
	// 				console.log(error)
	// 				this.$refs.paging.complete(false);
	// 			}
				
	// 		},
	// 		goPay(){
	// 			let ids=this.cartlist.map((it)=>it.id).join(',')
	// 			if(ids==''){
	// 				uni.$u.toast('请选择产品！')
	// 				return false
	// 			}
	// 			uni.navigateTo({
	// 				url:'/subpages/pages/product/confirmOrder?type=0&cartId='+ids
	// 			})
	// 		}
	// 	}
	// }
</script>
<style lang="scss">
	.page{

	}
	.alert-box{
		
		.title{
			display: flex;justify-content: space-between;
			align-items: center;
			padding:0 24rpx;
			line-height: 94rpx;
			.l{
				font-size: 30rpx;font-weight: bold;color:#141311;
			}
			.btn{
				display: flex;font-size: 28rpx;color:#666666;align-items: center;
			}
		}
		.list-box{
			width:702rpx;margin:0 auto;
			border-top:1rpx solid #FFE1CC;
			padding-top:24rpx;
			padding-bottom: 24rpx;
			.item{
				display: flex;
				margin-top:40rpx;
				padding-right: 28rpx;
				padding-left: 20rpx;
				
				&:nth-child(1){margin-top:0;}
				image{
					width:124rpx;height: 124rpx;border-radius: 20rpx;
				}
				.text{
					flex:1;margin-left:20rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.h1{
						font-size: 28rpx;color:#141311;font-weight: bold;
					}
					.b{
						display: flex;justify-content: space-between;align-items: center;
						image{
							width:36rpx;height:36rpx;
						}
						.money{
							align-items: flex-end;
							display: flex;font-size:32rpx;font-weight: bold;color:#FF401A;
							.em{
								font-size: 22rpx;padding-bottom: 5rpx;
							}
						}
						.num{
							display: flex;align-items: center;
							.val{
								width:48rpx;text-align: center;
							}
						}
					}
				}
				
			}
		}
	}
	.left-box{
		box-sizing: border-box;
		width:188rpx;text-align: center;height:100%;
		position: relative;
		.scroll{
			position: absolute;left:0;height:100%;width:100%;top:0;box-sizing: border-box;
		}
		.item{
			position: relative;
			font-size: 28rpx;color:#141311;font-weight: bold;line-height: 104rpx;
			&.on{
				color:#FF401A;
				background-color:#FFF0EB;
				&:after{
					position: absolute;top:32rpx;height:40rpx;width:8rpx;display: block;
					content: '';background-color: #FF401A;
				}
			}
		}
	}
	.content {
		padding-bottom:30rpx;
		.right{
			width:100%;height:100%;position: relative;
			box-sizing: border-box;
			.title{
				font-size:28rpx;color:#000000;font-weight: bold;padding-top:20rpx;padding-left: 20rpx;;
			}
			.item{
				display: flex;
				margin-top:40rpx;
				padding-right: 28rpx;
				padding-left: 20rpx;
				image{
					width:180rpx;height: 180rpx;
				}
				.text{
					flex:1;margin-left:20rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.h1{
						font-size: 28rpx;color:#141311;font-weight: bold;
					}
					.b{
						display: flex;justify-content: space-between;align-items: center;
						image{
							width:36rpx;height:36rpx;
						}
						.money{
							align-items: flex-end;
							display: flex;font-size:36rpx;font-weight: bold;color:#FF401A;
							.em{
								font-size: 24rpx;padding-bottom: 5rpx;
							}
						}
					}
				}
				
			}
		}
	}

	.paddinglr {
		padding: 0 28rpx;
	}

	.product {
		background-color: #FFF6F0;
		padding: 0 28rpx;
		display: flex;
		flex-wrap: wrap;
		gap: 22rpx;
		margin-top: 20rpx;
		margin-bottom: 32rpx;
		padding-bottom: 270rpx;

		.product1 {
			width: calc(50% - 12rpx);

			.product1-top {
				image {
					width: 336rpx;
					height: 336rpx;
				}
			}

			.product1-text {
				font-size: 28rpx;
				color: #000;
				margin-top: 16rpx;
			}

			.product1-bottom {
				display: flex;
				justify-content: space-between;
				padding: 0 10rpx;
				padding-top: 10rpx;

				.product1-bottom-left {
					font-size: 36rpx;
					color: #FF401A;
				}

				.product1-gwc {
					image {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
		}
	}

	.gouwuche {
		width: calc(100% - 56rpx);
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 28rpx;
		background-color: #FFF6F0;
		padding-bottom: env(safe-area-inset-bottom);
		.gouwuche-left {
			display: flex;
			align-items: center;
			.gouwuche-img{
				position: relative;
				image {
					width: 56rpx;
					height: 56rpx;
				}
				.num{
					position: absolute;
					top:-10rpx;right:-10rpx;
					line-height: 32rpx;
					text-align: center;
					width:32rpx;
					font-size:22rpx;color:#fff;
					border-radius: 40rpx;
					background-color: #F53F3F;
				}
			}

			.gouwuche-jiage {
				color: #FF401A;
				font-size: 40rpx;
				padding-left: 16rpx;
			}
		}

		.gouwuche-right {
			width: 240rpx;
			height: 76rpx;
			background-color: #FF401A;
			font-size: 28rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 76rpx;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
		}
	}
</style>